<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="renderer" content="webkit" />
<title>parent</title>
</head>
<body>
<button id="open">open new kid</button>
<button id="close">close all kids</button>
</body>
<script>
let kidArr = [];

document.querySelector('#open').addEventListener('click', e => {
	let kid = window.open('kid.html');
	kidArr.push(kid);
}, false);

document.querySelector('#close').addEventListener('click', closeAllKids, false);

window.addEventListener('message', e => {
	console.log(e.data);
	if (e.data !== 'close') return;
	closeAllKids();
	kidArr = [];
}, false);

function closeAllKids () {
	kidArr.forEach(kid => kid.close());
}
</script>
</html>